
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Lei Shi">
    <meta http-equiv="Cache-Control" content="o-transform">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">


    <title>个人中心 - 个人信息</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!--    <link rel="stylesheet" href="../../static/font-awesome//4.7.0/css/font-awesome.min.css">-->
    <!--    <link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">-->
    <link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
    <link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
    <link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">

    <style>
        @font-face {
            font-family: "lantingxihei";
            src: url("../fonts/FZLTCXHJW.TTF");
        }

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }

        #invite-user .modal-body .form-label {
            margin-bottom: 16px;
            font-size: 14px;
        }

        #invite-user .modal-body .form-invite {
            width: 80%;
            padding: 6px 12px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            border-radius: 5px;
            float: left;
            margin-right: 10px;
        }

        #invite-user .modal-body .msg-modal-style {
            background-color: #7dd383;
            margin-top: 10px;
            padding: 6px 0;
            text-align: center;
            width: 100%;
        }

        #invite-user .modal-body .modal-flash {
            position: absolute;
            top: 53px;
            right: 74px;
            z-index: 999;
        }

        /* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
    </style>

    <style>
        a:hover,
        a:focus {
            text-decoration: none;
        }

        span.label {
            display: inline-block;
            margin: 10px 3px 16px 3px;
            padding: 6px 16px;
            border: none;
            font-size: 14px;
            font-weight: 100;
        }

        span.label-default {
            color: #999;
            background: none;
        }

        span.label-success {
            color: #0c9;
            background: #E7F8F2;
        }

        .userinfo-banner [data-toggle="tooltip"] {
            display: inline-block;
            border-bottom: dashed 1px #999;;
            color: #999 !important;
        }

        .certificate-item {
            padding-top: 10px;
        }

        .certificate-item a {
            color: #444;
        }
    </style>
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/http.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/ReadState.js"></script>


</head>


<body>

<nav class="navbar navbar-default navbar-fixed-top header">
    <script src="../js/header.js"></script>
</nav>

<div id="app">

    <div class="container layout">
        <div class="row">
            <div class="col-md-12 layout-body">
                <div class="content" role="tabpanel">
                    <ul class="nav nav-tabs" rolw="tablist">
                        <li role="presentation" class="active">
                            <a href="study.html" role="tab">个人信息</a>
                        </li>
                        <li role="presentation">
                            <a href="reports.html" role="tab">学习课程</a>
                        </li>
                        <li role="presentation">
                            <a href="blog.html" role="tab">博文管理</a>
                        </li>
                        <li role="presentation" >
                            <a href="label.html" role="tab">标签管理</a>
                        </li>
                        <li role="presentation" >
                            <a href="advice.html" role="tab" id="remind">消息中心</a>
                        </li>
                    </ul>

                    <div class="row" style="padding-top:80px">
                        <el-divider content-position="center" >
                        <div class="col-md-9 center" >
                            <div class="pull-left userinfo-banner-avatar">
                                <div class="user-avatar ">
                                    <div class="cmt-ico" style="position: relative">
                                        <div>
                                            <form id="img-form" enctype="multipart/form-data" target="exec_target"
                                                  method="post">
                                                <div style="position: relative;border: 5px solid lightblue;width: 150px;height:150px;margin: 5px auto;border-radius: 50%;">
                                                    <img :src="user.imgUrl" alt="点击上传头像" id="avatar_img"
                                                         style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;"/>
                                                    <input type="file" @click="upload" v-model="user.userFile"
                                                           id="avatar_file"
                                                           name="avatar_file"

                                                           accept="image/jpg,image/png,image/gif"
                                                           style="width: 100%;height:100%;opacity: 0;position: absolute;left:0;top: 0;"/>
                                                </div>
                                            </form>

                                            <br/>
                                        </div>
                                    </div>
                                    <!-- 头像选择 end -->
                                </div>
                            </div>
                        </div>
                        </el-divider>
                        <div class="row" style="padding-top: 5%">
                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px" >
                                    <p>真实姓名:</p>
                                    <input type="text" id="username" v-model="user.username" class="form-control"
                                           aria-describedby="basic-addon1">


                                </div><!-- /input-group -->
                            </div><!-- /.col-lg-6 -->
                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px">
                                    <p> 昵称：</p>
                                    <input type="text" id="nickname" v-model="user.nickname" class="form-control"
                                           aria-describedby="basic-addon2">
                                </div><!-- /input-group -->
                            </div><!-- /.col-lg-6 -->

                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px">
                                    <p> 邮箱：</p>
                                    <input type="text" id="email" v-model="user.email" class="form-control" placeholder="XXX@qq.com"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div><!-- /.col-lg-6 -->

                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px">
                                    <p> 手机号：</p>
                                    <input type="text" id="telephone" v-model="user.telephone" class="form-control" placeholder="11位有效数字"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div><!-- /.col-lg-6 -->

                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px">
                                    <p> 新密码：</p>
                                    <input type="password" id="password1"  class="form-control" placeholder="输入新密码"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div><!-- /.col-lg-6 -->

                            <div class="col-lg-6">
                                <div class="input-group" style="margin-top: 20px">
                                    <p> 确认密码：</p>
                                    <input type="password" id="password2"  class="form-control" placeholder="确认密码"
                                           aria-label="Amount (to the nearest dollar)">
                                </div>
                            </div><!-- /.col-lg-6 -->

                            <div class="col-lg-12">
                                <div class="input-group" style="margin-top: 20px">
                                    <input type="submit" class="form-control btn btn-info" onclick="updateUser()" value="提交修改">
                                </div>
                            </div><!-- /.col-lg-6 -->
                        </div>


                    </div><!-- /.row -->


                    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

                    <!-- 钱包 -->
                    <div class="row" style="margin-top: 30px">
                        <div class="col-lg-12">
                            <table class="table table-hover">

                                <tr  class="success" style="height: 35px">
                                    <td>用户钱包余额</td>
                                    <td> {{user.balance}}</td>
                                    <td>
                                        <el-popover
                                                placement="top"
                                                width="280"

                                                trigger="click">
                                            <el-container>
                                                <el-row :gutter="10">

                                                    <el-col :offset="6" :xs="10" >
                                                        <div class="grid-content bg-purple">
                                                            <span>充值金额:￥</span>
                                                            <span id="money" style="color: red;font-size: 20px">{{money}}</span>
                                                        </div>
                                                    </el-col>
                                                    <br>
                                                    <br>
                                                    <el-col :xs="10">
                                                        <el-radio v-model="money" label="10" border> ￥10</el-radio>
                                                        <el-radio v-model="money" label="20" border> ￥20</el-radio>
                                                    </el-col>
                                                    <br>
                                                    <el-col :xs="10">
                                                        <el-radio v-model="money" label="50" border> ￥50</el-radio>
                                                        <el-radio v-model="money" label="100" border>￥100</el-radio>
                                                    </el-col>
                                                    <br>
                                                    <el-col :xs="10">
                                                        <el-button style="width: 100%;margin-top: 20px" type="primary" @click="open">提交</el-button>
                                                    </el-col>
                                                </el-row>
                                            </el-container>
                                            <a slot="reference" href="#">点击充值</a>
<!--                                            <el-button >click 激活</el-button>-->
                                        </el-popover>

                                    </td>
                                </tr>

                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 clearfix footer-col">
                <img src="../img/logo_03.png">
                <div class="footer-slogan">动手做实验，轻松学编程</div>
                <div class="col-xs-2">
                    <div class="social-item footer-weixin-item">
                        <i class="fa fa-weixin"></i>
                        <div class="footer-weixin">
                            <img src="../img/footer-weixin.png">
                        </div>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-qq-item">
                        <i class="fa fa-qq"></i>
                    </div>
                </div>
                <div class="col-xs-2">
                    <div class="social-item footer-weibo-item">
                        <a href="http://weibo.com/shiyanlou2013" target="_blank">
                            <i class="fa fa-weibo"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">公司</div>
                <a href="../privacy/index.html" target="_blank">关于我们</a><br>
                <a href="../privacy/index.html" target="_blank">联系我们</a><br>
                <a href="" target="_blank">加入我们</a><br>
                <a href="" target="_blank">技术博客</a><br>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">合作</div>
                <a href="../privacy/index.html" target="_blank">我要投稿</a><br>
                <a href="../labs/index.html" target="_blank">教师合作</a><br>
                <a href="../edu/index.html" target="_blank">高校合作</a><br>
                <a href="../privacy/index.html" target="_blank">友情链接</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">服务</div>
                <a href="../bootcamp/index.html" target="_blank">实战训练营</a><br>
                <a href="../vip/index.html" target="_blank">会员服务</a><br>
                <a href="../courses/reports.html" target="_blank">实验报告</a><br>
                <a href="../questions/index.html?tag=%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98" target="_blank">常见问题</a><br>
                <a href="../privacy/index.html" target="_blank">隐私条款</a>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2 footer-col">
                <div class="col-title">学习路径</div>
                <a href="../paths/index.html" target="_blank">Python学习路径</a><br>
                <a href="../paths/index.html" target="_blank">Linux学习路径</a><br>
                <a href="../paths/index.html" target="_blank">大数据学习路径</a><br>
                <a href="../paths/index.html" target="_blank">Java学习路径</a><br>
                <a href="../paths/index.html" target="_blank">PHP学习路径</a><br>
                <a href="../paths/index.html" , target="_blank">全部</a>
            </div>
        </div>
    </div>
    <div class="text-center copyright">
        <span>Copyright @2013-2016 education在线教育</span>
        <span class="ver-line"> | </span>
        <a href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备13019762号</a>

    </div>
</div>
</body>
</html>


<script>
    let htmluser = JSON.parse(sessionStorage.getItem("User"));
    if (sessionStorage.getItem("userImg") !=null){
        htmluser.imgUrl = sessionStorage.getItem("userImg");
    }
    console.log(htmluser);

    getUserBalance();

    function getUserBalance(){
        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type: "POST",
            url: baseUrl+"/education_api/user/selectUserBalance",
            data: htmluser,
            success: function (resp) {
                htmluser.balance = resp.data;
                console.log("钱包余额"+htmluser.balance);
            }
        });
        //httpPostWithParams("education_api/user/selectUserBalance",htmluser,updateBalance);
    }


    let vm = new Vue({
        el: '#app',
        data: {
            user: htmluser,
            money:0
        },
        methods: {
            open() {
                this.$confirm('此操作使用支付宝进行充值, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    alipay();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消成功'
                    });
                });
            },
            successMessage(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
                setTimeout("location.reload()",1000);
            },
            errorMessage(msg) {
                this.$message({
                    message: msg,
                    type: 'error'
                });

            },
            upload() {
                $("#avatar_file").change(function () {
                    let form = $(this)[0].files[0];
                    console.log(form);
                    console.log(htmluser.id);
                    // // 获取上传文件对象
                    let formData = new FormData();
                    formData.append('file', form);
                    formData.append("id", htmluser.id);
                    console.log(formData);

                    // 有参
                    $.ajax({
                        xhrFields:{
                            withCredentials:true
                        },
                        type: "POST",
                        //contentType: "multipart/form-data;charset=UTF-8",
                        dataType: "json",
                        contentType: false,
                        //取消帮我们格式化数据，是什么就是什么
                        processData: false,
                        url: baseUrl+"education_api/user/upload",
                        data: formData,
                        success: function (resp) {
                            //http 获得结果
                            console.log("===resp===");
                            console.log(resp);
                            htmluser.imgUrl = resp.data;

                            window.sessionStorage.setItem("userImg",resp.data);
                            this.successMessage("头像修改成功");
                        },
                        error: function () {
                            this.errorMessage("头像修改失败");
                        }
                    });
                });
            }
            //
        },

        mounted() {
            window.succ = this.successMessage;
            window.err  = this.errorMessage;
            //判断是否有未读消息
            messageRemind();
        }
    });


    function alipay() {
        let price =parseInt($("#money").text());
        console.log(price);
        let walletRecords = {
            money : price,
            type : 1,
            title : "充值",
            beforeBalance: htmluser.balance,
            afterBalance :  price + htmluser.balance,
            userId:htmluser.id
        }
        console.log("==================")
        console.log(walletRecords);
        $.ajax({
            xhrFields:{
                withCredentials:true
            },
            type: "POST",
            //contentType: "multipart/form-data;charset=UTF-8",
            dataType: "json",
            url: baseUrl+"education_api/doPay",
            data: walletRecords,
            /**
             * 渲染支付页面
             */
            success: function (resp) {
                // 接收 付款页面和订单编号
                //let paymentHtml = JSON.parse(resp);
                sessionStorage.setItem("paymentHtml",resp.data);
                location.href = "payment.html";
                console.log(typeof resp.data);
                console.log(resp.data);

            }
        });
    };


    function updateUser() {
        let htmlTelephone = $("#telephone").val();
        if (!(/^1[3456789]\d{9}$/.test(htmlTelephone))) {
            err("手机号码输入错误");
            return;
        }

        let htmlEmail = $("#email").val();
        if (!(/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(htmlEmail))){
            err("邮箱输入错误");
            return;
        }

        let password1 = $("#password1").val();
        let password2 = $("#password2").val();
        if (password1 !== password2){
            err("两次密码不一致");
            return;
        }
        if (password1.trim() == "" || password1.length==0){
            password1 = null;
        }
        console.log(password1);

        let user = {
           id        : htmluser.id,
           username  : $("#username").val(),
           nickname  : $("#nickname").val(),
           email     : htmlEmail,
           telephone : htmlTelephone,
           password  : password1,
       }

        console.log(user);

       $.ajax({
           xhrFields:{
               withCredentials:true
           },
           type: "POST",
           url : baseUrl+"education_api/user/updateUser",
           data: user,
           success:function () {
               htmluser.username = user.username;
               htmluser.nickname = user.nickname;
               htmluser.email = user.email;
               htmluser.telephone = user.telephone;
               sessionStorage.setItem("User",JSON.stringify(htmluser));
               succ("信息修改成功");
           }
       });

    }

    function setSession() {

    }

</script>
